<template>
	<view class="temp">
		<navbar title='医技护接单' height="176rpx"
			background="linear-gradient(180deg, rgba(68, 212, 168, 0.3) 0%, rgba(255, 255, 255, 1) 100%)"></navbar>
		<view scroll-y="true" class="customContent" :style="{top: isH5 ? '150rpx' : `${ 50 + statusBarHeight}px`}">
			<view class="serchContent">
				<view class="top-navbar">
					<view :class="currentIndex==1?'active':''" @tap="changeType(1)">医师</view>
					<view :class="currentIndex==2?'active':''" @tap="changeType(2)">机构</view>
				</view>
				<view class="physician-content">
					<view class="search">
						<u-search shape="square" placeholder="搜索" v-model="keyword" :showAction="false"></u-search>
					</view>
					<view class="nav-list">
						<view class="nav-item" :class="{active:index===0}" v-for="(item,index) in 20" :key="index">临床
						</view>
					</view>
					<view class="filter">
						<dropdown :data="filter_action"></dropdown>
					</view>
				</view>
			</view>
			<view class="dataCon">
				<acceptItem @accpetOrder='accpetOrder'></acceptItem>
			</view>
		</view>
		<orderPop ref="orderPop" :show='showPop' :round='32'>
			<view class="popText">
				<view>1.禁止私下交易，发现封号处理</view>
				<view>2.禁止乱接单根据自己专业对口接单，发现严惩！</view>
				<view>3.禁止做复位手法，禁止开展含创伤、破皮性等任何类别医疗工作，违法行为后果自负！护理打针，抽血，除外！</view>
				<view>4.上门护士需要自备材料抽血管等，客户发布的价格已包含材料不另外报销。</view>
				<view>5.以健康指导为主</view>
			</view>
		</orderPop>
		<!-- <orderPop ref="orderPop" :show='showPop' :round='32'>
			<view class="popText">
				<view>1.需要仔细看清客户需求再接单。</view>
				<view>2.遇到欺骗消费者或诱导消费者等讲课要拒绝配合，收集证据向警察或者官方举报！</view>
			</view>
		</orderPop> -->
	</view>
</template>

<script>
	import acceptItem from './components/acceptItem.vue';
	import navMixin from "@/mixin/navMixin.js"
	export default {
		mixins: [navMixin],
		components: {
			acceptItem
		},
		onLoad() {

		},
		data() {
			return {
				currentIndex: 1,
				keyword: "",
				showPop: false,
				filter: {
					value1: "wq",
					value2: 2,
				},
				filter_action: [{
						title: "职业",
						options: [{
								label: '默认排序',
								value: 1,
							},
							{
								label: '距离优先',
								value: 2,
							},
							{
								label: '价格优先',
								value: 3,
							}
						]
					},
					{
						title: "年龄",
						options: [{
								label: '默认排序',
								value: 1,
							},
							{
								label: '距离优先',
								value: 2,
							},
							{
								label: '价格优先',
								value: 3,
							}
						]
					}
				]
			};
		},
		methods: {
			changeType(val) {
				this.currentIndex = val
			},
			accpetOrder() {
				this.$refs.orderPop.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
	}

	.topCon {
		position: absolute;
		width: 100%;
		background: linear-gradient(180deg, rgba(204, 243, 231, 1) 1%, rgba(250, 254, 253, 1) 85%);
		z-index: 1;
	}

	.customContent {
		position: relative;
		z-index: 99;
	}

	.temp {
		position: relative;

		.serchContent {
			padding: 24rpx;
			background-color: #FFF;

			.top-navbar {
				position: relative;
				display: flex;
				border: 6rpx #EBF7F2 solid;
				padding: 6rpx;
				border-radius: 24rpx;
				background: rgba(235, 247, 242, 1);

				>view {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 68rpx;
					width: calc(100% / 2);
					border-radius: 20rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: $theme-color;
					background-color: #EBF7F2;
				}

				>view.active {
					color: #FFF;
					font-weight: 500;
					background-color: #44D4A8;
				}
			}

			.physician-content {
				margin-top: 32rpx;

				.search {
					position: relative;
				}

				.nav-list {
					margin: 32rpx 0;
					display: flex;
					column-gap: 24rpx;
					overflow: auto;

					.nav-item {
						min-width: 112rpx;
						height: 48rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						border-radius: 24rpx;
						background: rgba(246, 248, 252, 1);
						display: inline-flex;
						justify-content: center;
						align-items: center;
						flex-wrap: nowrap;
					}

					.nav-item.active {
						font-weight: 500;
						background-color: $theme-color;
						color: #FFF;
					}
				}

				.filter {
					position: relative;
				}
			}
		}

		.dataCon {
			padding: 24rpx 24rpx 0 24rpx;
			background-color: #F5F5F5 !important;
		}
	}

	::v-deep .u-search__content {
		height: 80rpx;
		background-color: rgba(246, 248, 252, 1) !important;
		border-radius: 24rpx !important;
	}

	.u-search__content__input {
		background-color: rgba(246, 248, 252, 1) !important;
	}

	::v-deep .u-search__content__input {
		background-color: rgba(246, 248, 252, 1) !important;
	}

	.popText {
		width: 590rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(54, 68, 79, 1);
		padding: 48rpx 46rpx 46rpx 46rpx;
		line-height: 50rpx;

		view {
			margin-top: 16rpx;
		}
	}
</style>